<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>为什么要使用虚拟列表</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      ul,
      ol {
        list-style: none;
      }

      html,
      body {
        height: 100%;
      }

      body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
      }

      .container {
        height: 500px;
        border: 1px solid;
        overflow-y: scroll;
      }

      .list {
        width: 500px;
      }

      .item {
        height: 50px;
      }
    </style>
  </head>
  <body>
    <button class="btn">渲染数据</button>
    <div class="container">
      <ul class="list">
        <li class="item">1</li>
      </ul>
    </div>
    <script>
      const $btn = document.querySelector(".btn");
      const $list = document.querySelector(".list");
      const datas = new Array(100000).fill(0);

      function render() {
        $list.innerHTML = datas
          .map((d, i) => `<li class="item">${i}</li>`)
          .join("");
      }

      $btn.addEventListener("click", function (e) {
        render();
      });
    </script>
  </body>
</html>
